<template>
	<view>
		<view class="rgister_list" v-if="reservation.length>0">
			<view class="card" v-for="item in reservation">
				<view class="card-row">
					<text class="card-label">申请类型:</text>
					<text class="card-value">{{item.division_type}}</text>
					<text
						class="status">{{item.status_text}}</text>
				</view>
				<view class="card-row">
					<text class="card-label">申请区域:</text>
					<text class="card-value">{{item.city}}</text>
				</view>
				<view class="card-row">
					<text class="card-label">申请时间:</text>
					<text class="card-value"> {{item.add_time}} </text>
				</view>
			</view>
		</view>
		<block v-else>
			<emptyPage title="暂无数据～"></emptyPage>
		</block>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue'
	import {
		usercityapplylist
	} from "@/api/api.js"
	export default {
		data() {
			return {
				reservation: []
			}
		},
		components: {
			emptyPage
		},
		onLoad(options) {},
		onShow() {
			this.reservationList();
		},
		methods: {
			reservationList() {
				usercityapplylist().then(res => {
					this.reservation = res.data.list;
				}).catch(err => {
					this.$util.Tips({
						title: err
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.rgister_list {
		padding: 20rpx;

		.card {
			background-color: #fff;
			border-radius: 10px;
			padding: 25rpx;
			width: 100%;
			/* Adjust card width as needed */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			/* Subtle shadow for depth */
			position: relative;
			margin-bottom: 20rpx;
		}

		.card-row {
			display: flex;
			margin-bottom: 15rpx;
			align-items: center;

			/* Vertically align the text */
			.status {
				position: absolute;
				top: 25rpx;
				right: 25rpx;
				color: rgba(29,176,252,1);
				/* Example success color */
				font-weight: bold;
			}
		}

		.card>.card-row:last-child {
			/* 假设 card 是父元素的 class */
			margin-bottom: 0 !important;
		}

		.card-label {
			font-weight: bold;
			margin-right: 5px;
			color: #333;
		}

		.card-value {
			color: #666;
			flex: 1;
			/* Take up remaining space */
		}


	}
</style>